import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'umi';
import DrawerCondition from '@/components/DrawerCondition';
import TableDataBlock from '@/components/TableDataBlock';
import { Button } from 'antd';
import PopImgShow from '@/components/PopImgShow';
const AgentModal = (props) => {
  const {
    show = false,
    onSumbit,
    onClose,
    loading,
    dispatch,
    list,
    detail = {},
    type = 'product',
  } = props;
  const { id } = detail;
  const tableRef = useRef(null);
  // 搜索参数
  const modalProps = {
    title: `主推经理设置 `,
    visible: show,
    onClose,
    footer: (
      <Button type="primary" loading={loading} onClick={onClose}>
        确定
      </Button>
    ),
  };
  const fakeNotRecommended = (id) => {
    dispatch({
      type: type === 'product' ? 'produce/fakeNotRecommended' : 'produce/fakeNotCreditAgent',
      payload: {
        id,
      },
      callback: (e) => {
        tableRef.current.fetchGetData();
      },
    });
  };
  const fakeRecommendedProductAgent = (id) => {
    dispatch({
      type: type === 'product' ? 'produce/fakeRecommendedProductAgent' : 'produce/fakeCreditAgent',
      payload: {
        id,
      },
      callback: (e) => {
        tableRef.current.fetchGetData();
      },
    });
  };
  const searchItems = [
    {
      label: '用户名称',
      name: 'username',
    },
    {
      label: '手机号',
      name: 'mobile',
    },
  ];
  const getColumns = [
    {
      title: '经理头像',
      align: 'center',
      width: 100,
      dataIndex: 'profile',
      render: (val) => <PopImgShow width={30} url={val} />,
    },
    {
      title: '经理名称',
      align: 'center',
      width: 100,
      dataIndex: 'username',
    },
    {
      title: '经理手机号',
      align: 'center',
      width: 100,
      dataIndex: 'mobile',
    },
  ];
  const importAgent = {
    type: 'handle',
    dataIndex: 'id',
    render: (val, record) => [
      {
        auth: true,
        title: '移除',
        type: 'edit',
        click: () => {
          fakeNotRecommended(val);
        },
      },
    ],
  };
  const addAgent = {
    type: 'handle',
    dataIndex: 'id',
    render: (val, record) => [
      {
        auth: true,
        title: '加入',
        type: 'edit',
        click: () => {
          fakeRecommendedProductAgent(val);
        },
      },
    ],
  };

  return (
    <DrawerCondition {...modalProps}>
      <TableDataBlock
        tableSize="small"
        cardProps={{
          title: '主推经理',
        }}
        columns={[...getColumns, importAgent]}
        scroll={{ y: 400 }}
        rowKey={(row) => `${row.id}`}
        paginationProps={{
          pageSize: 5,
        }}
        list={list.filter((item) => {
          return item.recommendFlag === '1';
        })}
      ></TableDataBlock>
      <TableDataBlock
        tableSize="small"
        cardProps={{
          title: '选择列表',
        }}
        params={{
          productId: id,
          creditId: id,
        }}
        searchItems={searchItems}
        cRef={tableRef}
        loading={loading}
        columns={[...getColumns, addAgent]}
        scroll={{ y: 400 }}
        rowKey={(row) => `${row.id}`}
        dispatchType={
          type === 'product' ? 'produce/fetchListProductAgent' : 'produce/fetchListCreditAgent'
        }
        list={list.filter((item) => {
          return item.recommendFlag === '0';
        })}
      ></TableDataBlock>
    </DrawerCondition>
  );
};
export default connect(({ produce, loading }) => ({
  list: produce.agentList.list,
  loading: loading.effects['produce/fetchListProductAgent'],
}))(AgentModal);
